<template>
  <el-dropdown placement="top">
    <el-button>
      创作
      <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" class="zone-author">
      <div class="zone-author-top">
        <a
          href="route.path"
          class="zone-author-top-item"
          v-for="(route,index) in navAuthor"
          :key="index"
        >
          <i :style="{'background-position':'0 '+ index * 48 +'px'}"></i>
          <span>{{route.title}}</span>
        </a>
      </div>
      <div class="zone-author-bottom">
        <div class="zone-author-bottom-lable">
          <span>创作活动</span>
          <a href="more" class="hover-a">更多></a>
        </div>
        <div class="zone-author-bottom-content">
          <a
            class="hover-a"
            :href="event.path"
            v-for="(event,index) in navAuthorEvents"
            :key="index"
          >{{event.text}}</a>
        </div>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {

  get navAuthor() {
    return this.$store.state.navModule.navAuthor;
  }
  get navAuthorEvents() {
    return this.$store.state.navModule.navAuthorEvents;
  }
}
</script>

<style lang='less' scoped>
a {
  .wh(auto, 48px);
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  line-height: 48px;
  color: #222;
  &:hover {
    text-decoration: none;
  }
}
.hover-a {
  line-height: unset;
  height: unset;
  padding: 5px;
  padding-right: unset;
  &:hover {
    color: #fc5531;
  }
}
.zone-author {
  .wh(362px, 230px);
  .flex-box(column, flex-start);
  padding: 10px;

  .zone-author-top {
    .wh(auto, 100px);
    .flex-box(row, space-between);
    border-bottom: 1px solid #999aaa;

    .zone-author-top-item {
      display: block;
      .wh(auto, 100%);
      padding-left: 10px;
      padding-right: 10px;
      opacity: 0.7;
      &:hover {
        opacity: 1;
      }
      i {
        display: block;
        .wh(48px);
        background-image: url("~@/assets/images/author.png");
        background-size: 300%;
      }
    }
  }
  .zone-author-bottom {
    .wh(100%, 130px);
    .flex-box(column, flex-start);

    .zone-author-bottom-lable {
      .wh(100%, 30px);
      .flex-box(row, space-between);
    }
    .zone-author-bottom-content {
      .wh(100%, auto);
      .flex-box(column, flex-start, flex-start);
    }
  }
}

.el-dropdown-menu {
  top: 36px !important;
}

.el-button {
  .wh(auto, 30px);
  border: none;
  border-radius: 30px;
  background-color: #fc5531;
  color: #fff;
  padding: 0 15px;
  &:hover {
    background-color: #fc1944;
    border: none;
  }
}
</style>